<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>味易欧商城</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_508245_re1nubji8k2wqaor.css">
    <link rel="stylesheet" type="text/css" href="css/sm.css">
    <link rel="stylesheet" type="text/css" href="css/lib/swiper-3.4.2.min.css">
    <link rel="stylesheet" type="text/css" href="css/module.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
</head>
<style>
.page {
    background-color: #f5f6f7;
}
</style>

<body>
    <div class="page-group">
        <div class="page">
            <div class="content">
                <!-- 轮播 -->
                <div class="swiper-container">
                    <div class="back">
                        <i class="iconfont icon-more1 ico"></i>
                    </div>
                    <div class="share">
                        <i class="iconfont icon-fenxiang ico"></i>
                    </div>
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img alt="" src="http://m.360buyimg.com/mobilecms/s720x322_jfs/t5068/227/80705082/78718/2b3e7e51/58da47c7N7f52ec97.jpg!q70.jpg">
                        </div>
                        <div class="swiper-slide">
                            <img src="http://img.alicdn.com/imgextra/i3/1910146537/TB2WRU_kkqvpuFjSZFhXXaOgXXa_!!1910146537.jpg_760x760Q70s50.jpg_.webp">
                        </div>
                        <div class="swiper-slide">
                            <img src="http://img.alicdn.com/imgextra/i2/725677994/TB251FCd1tTMeFjSZFOXXaTiVXa_!!725677994.jpg_760x760Q70s50.jpg_.webp">
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                <!-- 标题 -->
                <li class="goods-det clearfix">
                    <h1 class="over xl">钛伽机械鼠标 有线台式电脑笔记本网吧金属加重CF游戏鼠标LOL专用</h1>
                    <div style="line-height: 1.5rem;">
                        <span class="price red xl"><b>158.00</b></span>
                        <s class="l hui price ">158.00</s>
                        <div class="pull-right m"><span class="hui ">限时团购</span>&nbsp;<span class="time ">13天12小时21分44秒</span></div>
                    </div>
                </li>
                <!-- 参团 -->
                <ul class="group">
                    <ul class="underline">
                        <li class="flex header">
                            <h1 class="xl cell-left cell-main">17人在参团</h1>
                            <div class="more hui l">查看更多</div>
                            <i class="iconfont icon-more arrow cell-right"></i>
                        </li>
                    </ul>
                    <ul class="underline">
                        <div class="inf-box flex middle">
                            <img src="" alt="" class="pic ">
                            <div class="name xl">林志伟</div>
                            <div class="cell-main right fn inf-a">
                                <span class="l">还差<span class="pnum">1</span>人拼成</span>
                                <div class="addre m">宁海社区17号楼1103</div>
                            </div>
                            <div class="join cell-right xl">去拼团</div>
                        </div>
                    </ul>
                    <ul class="underline">
                        <div class="inf-box flex middle">
                            <img src="" alt="" class="pic cell-left">
                            <div class="name xl">林志伟</div>
                            <div class="cell-main right fn inf-a">
                                <span class="l">还差<span class="pnum">1</span>人拼成</span>
                                <div class="addre m">宁海社区17号楼1103</div>
                            </div>
                            <div class="join cell-right xl">去拼团</div>
                        </div>
                    </ul>
                </ul>
                <!-- 选择 -->
                <ul class="select-group">
                    <li class="flex select-box">
                        <div class=" cell-main l">所在小区</div>
                        <div class="hui l cell-right adrs">宁海社区17楼</div>
                        <i class="iconfont icon-more arrow"></i>
                    </li>
                    <div class="underline"></div>
                    <li class="flex select-box">
                        <div class=" cell-main l">已选</div>
                        <div class="hui l cell-right "><span class="goodsnumb">1</span>件</div>
                        <i class="iconfont icon-more arrow"></i>
                    </li>
                </ul>
                <!-- 评价 -->
                <ul class="assess">
                    <li class="header flex">
                        <div class=" cell-main l">用户评价<span class="assnum">（12000）</span></div>
                        <div class="hui l cell-right adrs">查看全部</div>
                        <i class="iconfont icon-more arrow"></i>
                    </li>
                    <div class="underline"></div>
                    <ul class="grade-wrapper flex">
                        <div class="btn-grade cell-main l">好评(10)</div>
                        <div class="btn-grade cell-main l">中评(10)</div>
                        <div class="btn-grade cell-main l">差评(10)</div>
                        <div class="btn-grade cell-main l">有图(10)</div>
                    </ul>
                    <div class="assess-box">
                        <li class="head flex middle">
                            <img src="" alt="" class="pic">
                            <div class="cell-main">
                                <span class="name xl">林青晴</span>
                                <div class="hui l"><span class="time">2017-09-25</span>&nbsp; 规格：<span class="spec">白色 M码</span></div>
                            </div>
                        </li>
                        <div class="assess-det xl">总体不错，就是没有黑色的。以前都是用黑色的，然后鼠 标底部的感应有点太灵敏了，抬起来晃动鼠标。指针还是 跟着动，
                        </div>
                        <li class="flex pic-box">
                            <img src="" alt="" class="img">
                            <img src="" alt="" class="img">
                            <img src="" alt="" class="img">
                        </li>
                    </div>
                </ul>
                <!-- 详情 -->
                <div class="items-wrapper">
                    <div class="header">
                        <h1 class="title">商品详情</h1></div>
                    <div class="underline"></div>
                    <img src="./images/promise.png" alt="" class="pic auto">
                </div>
                <!-- 推荐 -->
                <div class="Recommend">
                    <img src="./images/push.png" alt="" class="img">
                    <li class="flex goods-box">
                        <img src="" alt="" class="pic cell-right">
                        <div class="cell-main">
                            <div class="name over">山东特产 青州蜜桃冬雪蜜桃 冬桃 小毛桃新鲜水果 5斤装</div>
                            <div class="price orange xl ">79.00</div>
                            <div class="timetip">剩余时间</div>
                            <div class="time m">6天8时59分22秒</div>
                            <div class="person m">200参与</div>
                            <div class="join">去拼团</div>
                        </div>
                    </li>
                </div>
            </div>
            <nav class="bar bar-tab" id="tool-bar">
                <a class="tab-item external">
                 <span class="ic iconfont icon-shouye"></span>
                <div class="tab-label fn">首页</div>
            </a>
                <a class="tab-item external ">
                <span class="ic iconfont icon-kongxinxing"></span>
                <div class="tab-label fn">收藏</div>
            </a>
                <a class="tab-item fn" id="singer">
                    <div class="price l ">158.00</div>
                    单独购买</a>
                <a href="#" class="tab-item fn" id="joinus">
                    <div class="price l">158.00</div>立即购买</a>
            </nav>
        </div>
        <div class="expand"></div>
        <!-- 拼团弹窗 -->
        <div class="jointeam">
            <div class="close">&times;</div>
            <div class="header">
                <h1 class="title">正在拼团</h1></div>
            <ul class="box-team">
                <div class="underline">
                    <li class="team-meb flex">
                        <img src="" alt="" class="avatar">
                        <div class="cell-main">
                            <span class="m"><span class="name l">林志伟&nbsp;</span>还差<span class="meb-num">1</span>人拼成</span>
                            <div class="address l">宁海社区17号楼1103</div>
                        </div>
                        <div class="btn">去拼团</div>
                    </li>
                </div>
                <div class="underline">
                    <li class="team-meb flex">
                        <img src="" alt="" class="avatar">
                        <div class="cell-main">
                            <span class="m"><span class="name l">林志伟&nbsp;</span>还差<span class="meb-num">1</span>人拼成</span>
                            <div class="address l">宁海社区17号楼1103</div>
                        </div>
                        <div class="btn">去拼团</div>
                    </li>
                </div>
                <div class="underline">
                    <li class="team-meb flex">
                        <img src="" alt="" class="avatar">
                        <div class="cell-main">
                            <span class="m"><span class="name l">林志伟&nbsp;</span>还差<span class="meb-num">1</span>人拼成</span>
                            <div class="address l">宁海社区17号楼1103</div>
                        </div>
                        <div class="btn">去拼团</div>
                    </li>
                </div>
                <div class="underline">
                    <li class="team-meb flex">
                        <img src="" alt="" class="avatar">
                        <div class="cell-main">
                            <span class="m"><span class="name l">林志伟&nbsp;</span>还差<span class="meb-num">1</span>人拼成</span>
                            <div class="address l">宁海社区17号楼1103</div>
                        </div>
                        <div class="btn">去拼团</div>
                    </li>
                </div>
                <div class="underline">
                    <li class="team-meb flex">
                        <img src="" alt="" class="avatar">
                        <div class="cell-main">
                            <span class="m"><span class="name l">林志伟&nbsp;</span>还差<span class="meb-num">1</span>人拼成</span>
                            <div class="address l">宁海社区17号楼1103</div>
                        </div>
                        <div class="btn">去拼团</div>
                    </li>
                </div>
                <div class="underline">
                    <li class="team-meb flex">
                        <img src="" alt="" class="avatar">
                        <div class="cell-main">
                            <span class="m"><span class="name l">林志伟&nbsp;</span>还差<span class="meb-num">1</span>人拼成</span>
                            <div class="address l">宁海社区17号楼1103</div>
                        </div>
                        <div class="btn">去拼团</div>
                    </li>
                </div>
                <div class="underline">
                    <li class="team-meb flex">
                        <img src="" alt="" class="avatar">
                        <div class="cell-main">
                            <span class="m"><span class="name l">林志伟&nbsp;</span>还差<span class="meb-num">1</span>人拼成</span>
                            <div class="address l">宁海社区17号楼1103</div>
                        </div>
                        <div class="btn">去拼团</div>
                    </li>
                </div>
                <div class="underline">
                    <li class="team-meb flex">
                        <img src="" alt="" class="avatar">
                        <div class="cell-main">
                            <span class="m"><span class="name l">林志伟&nbsp;</span>还差<span class="meb-num">1</span>人拼成</span>
                            <div class="address l">宁海社区17号楼1103</div>
                        </div>
                        <div class="btn">去拼团</div>
                    </li>
                </div>
                <div class="underline">
                    <li class="team-meb flex">
                        <img src="" alt="" class="avatar">
                        <div class="cell-main">
                            <span class="m"><span class="name l">林志伟&nbsp;</span>还差<span class="meb-num">1</span>人拼成</span>
                            <div class="address l">宁海社区17号楼1103</div>
                        </div>
                        <div class="btn">去拼团</div>
                    </li>
                </div>
            </ul>
        </div>
        <!-- 规格 -->
        <ul class="spec-box"> 
            <img src="" alt="" class="goodpic">
            <ul class="mb">
            <li class="spec-main">
                <div class="name over xl">钛伽机械鼠标 有线台式电 脑笔记本网吧金属加重...
                </div>
                <span class="red price xl">158.00</span>
                <div class="l">库存<span class="specnum">10000</span>件</div>
            </li>
            <div class="flex flex-wrap">
                <div class="spec">红色  金属质</div>
                <div class="spec">红色  金属质</div>
                <div class="spec">红色  金属质</div>
                <div class="spec">红色  金属质</div>
                <div class="spec">红色  金属质</div>
            </div>
            <li class="upline underline">
                <div class="flex numsel">
                    <div class="text">购买数量</div>
                    <div class="cell-main right">
                        <div class="reduce"><i class="iconfont icon-jian"></i></div>
                        <span class="number hui">1</span>
                        <div class="add"><i class="iconfont icon-jia"></i></div>
                    </div>
                </div>
            </li>
            </ul>
            <div class="bottom">
                <div class="flex">
                    <div class="cell-main goCart">加入购物车</div>
                    <div class="cell-main joingroup">一键参团</div>
                </div>
            </div>
            <i class="close-box iconfont icon-close2"></i>
        </ul>
    </div>
    <script type='text/javascript' src='js/lib/zepto.js' charset='utf-8'></script>
    <script type='text/javascript' src='js/lib/swiper-3.4.2.min.js' charset='utf-8'></script>
    <script>
    $.config = { router: false }
    </script>
    <script type='text/javascript' src='js/lib/sm.js' charset='utf-8'></script>
    <script>
    $.init()
    </script>
    <script type="text/javascript">
    var mySwiper = new Swiper('.swiper-container', {
        loop: true,
        autoplay: 5000,
        paginationClickable: true,
        pagination: '.swiper-pagination',
    })
    </script>
</body>

</html>